<template>
    <div class="editor_wraper">
      <div id="mytoolbar"></div>
          <el-input
        class="titleStyle"
        v-model="defaultTitle"
        type="textarea"
        resize="none"
        :autosize="{ minRows: 1, maxRows: 3 }"
        placeholder="请在这里输入标题"
      ></el-input>
      <div id="mytinymce"></div>
    </div>
  </template>
   
  <script>
  import tinymce from "tinymce";
  import { uploadImage } from "@/api/file";
  import {
    toolbar,
    fontsizeFormats,
    fontFormats,
    lineheightFormats,
    plugins
  } from "@/utils/tinymceConfig";

  export default {
    name:'TinymceEditor',
    data() {
      return {
        defaultTitle: "",
        content: "",
        
        tinymceInit: {
          selector:'#mytinymce',
          language: "zh-Hans", //语言类型
          quickbars_image_toolbar: "", // 选中媒体文件时的弹框
          // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
          toolbar: toolbar, //工具栏配置，设为false则隐藏
          plugins:plugins,
          menubar: false, //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
          // height: 500, // 富文本高度
          model: 'dom', // 是否可拉伸富文本框
          fontsize_formats: fontsizeFormats, //字体大小
          font_formats: fontFormats, //字体样式
          lineheight_formats: lineheightFormats, //行高配置，也可配置成"12px 14px 16px 20px"这种形式
          placeholder: "在这里输入文字",
          branding: true, //tiny技术支持信息是否显示
          // resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
          statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
          paste_data_images: true, //图片是否可粘贴
          elementpath: false, //元素路径是否显示
   
          inline: false, //使用内联模式
          toolbar_persist: true, // 在内联模式中，工具栏是否自动显示和隐藏
          fixed_toolbar_container: "#mytoolbar", // 将工具栏显示在一个固定的html元素上
          images_upload_handler: async (blobInfo) => {
                    const formData = new FormData();
                    formData.append('file', blobInfo.blob())

                    const res = await uploadImage(formData)
                    let url = res.data.imageUrl;
                    return url                   
                    }
        },
      };
    },
    mounted(){
        tinymce.init(this.tinymceInit)
    },
    methods:{
        getTitle(){
          return this.defaultTitle
        },
        getContent(){
          this.content = tinymce.activeEditor.getContent()
          console.log(this.content)
          return this.content
        }
    }
  };
  </script>
   
  <style lang="scss">
  .editor_wraper {
    width: 100%;
    height: 70vh;
    margin: 0 auto;
  }
  .editor_wraper>#mytinymce{
    width: 100vw;
    height: 60vh;
  }
  .mce-content-body{
    height: 100%;
    outline: none;
  }
  .titleStyle .el-textarea__inner {
    width: 100%;
    height: 56px;
    font-size: 24px;
    font-weight: 500;
    margin-top: 10px;
    padding-left: 0;
    border: none;
  }
  .abstractStyle .el-textarea__inner {
    font-size: 22px;
    font-weight: 500;
    color: #bbb;
    margin-top: 5px;
    padding-left: 0;
    border: none;
  }
  </style>